<template>
  <div class="myContainer">
    <el-row class="myTitleBorderBottom myMarginBottom_10px">
      <el-col :span="12" class="myLineHeight_40px">设备基础信息</el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
        设备名称 :
      </el-col>
      <el-col :span="7">
        <el-input placeholder="请输入设备名称" v-model="detail.dev_name" :readonly="is_modifly"></el-input>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
        设备编号 :
      </el-col>
      <el-col :span="7">
        <el-input placeholder="请输入设备编号" v-model="detail.dev_no" :readonly="is_modifly"></el-input>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
        设备类型 :
      </el-col>
      <el-col :span="7">
        <el-select 
          v-model="devTypeSelected"
          :disabled="is_modifly"
          placeholder="请选择设备类型">
          <el-option
            v-for="item in Object.keys(devTypeList)"
            :key="devTypeList[item]"
            :label="devTypeList[item]"
            :value="item">
          </el-option>
        </el-select>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
        所属小区 :
      </el-col>
      <el-col :span="7">
        <el-select v-model="areaSelected"
          @visible-change="clickAreaSelect"
          :loading="loading"
          :disabled="is_mod"
          placeholder="请选择小区">
          <el-option
            v-for="item in areaList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
        所属设备房 :
      </el-col>
      <el-col :span="7">
        <el-select 
          v-model="devRoomSelected"
          :disabled="is_dis"
          placeholder="请选择设备房">
          <el-option
            v-for="item in devRoomList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-col>
    </el-row>
    <el-row class="myTitleBorderBottom myMarginBottom_10px">
      <el-col :span="12" class="myLineHeight_40px">设备出厂信息</el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        制造日期 :
      </el-col>
      <el-col :span="7">
        <el-date-picker
          :readonly="is_modifly"
          v-model="detail.mfg_date"
          type="date"
          placeholder="制造日期">
        </el-date-picker>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        质保日期 :
      </el-col>
      <el-col :span="7">
        <el-date-picker
          :readonly="is_modifly"
          v-model="detail.exp_date"
          type="date"
          placeholder="质保日期">
        </el-date-picker>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        注册代码 :
      </el-col>
      <el-col :span="7">
        <el-input placeholder="请输入注册代码" v-model="detail.bonus_code" :readonly="is_modifly"></el-input>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        制造单位 :
      </el-col>
      <el-col :span="7">
        <el-input placeholder="请输入制造单位" v-model="detail.mfg_company" :readonly="is_modifly"></el-input>
      </el-col>
    </el-row>
    <el-row class="myTitleBorderBottom myMarginBottom_10px">
      <el-col :span="12" class="myLineHeight_40px">设备状态及备注信息</el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
        设备状态 :
      </el-col>
      <el-col :span="7" class="myLineHeight_40px">
        <el-radio-group v-model="detail.status">
          <el-radio :label="1">启用</el-radio>
          <el-radio :label="0">禁用</el-radio>
        </el-radio-group>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="3" class="myLeftMsg">
        <span class="require myVA_M">*</span>
        备注 :
      </el-col>
      <el-col :span="10">
        <el-input placeholder="备注" type="textarea" v-model="detail.extra_desc" :readonly="is_modifly"></el-input>
      </el-col>
    </el-row>
    <el-row class="myPaddingBottom_10px">
      <el-col :span="7" :offset="3">
        <el-button type="primary" class="myBgGreen" v-if="type=='update' && isShow(222)" @click="modify">保 存</el-button>
        <el-button type="primary" class="myBgGreen" v-if="type=='add'" @click="create">新 增</el-button>
        <el-button type="primary" class="myBgGreen" @click="onBack">返 回</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
  .myContainer{
    background: #fff;
    padding: 10px;
  }
  .myTitleBorderBottom{
    color: #000;
    font-weight: 500;
    font-size: 16px;
    border-bottom: 1px solid #dbdbdb;
  }
  .myBgGreen{
    background: #00c2a9;
    border-color: #00c2a9;
    color: #fff;
    margin-top:2px;
  }
  .myBgGreen:hover{
    background: #33ceba;
  }
  .myTextAlignRight{
    text-align: right;
  }
  .myLineHeight_40px{
    line-height: 40px;
  }
  .myMarginTop_10px{
    margin-top: 10px;
  }
  .myLeftMsg{
    line-height: 40px;
    text-align: right;
    padding-right: 10px;
  }
  .myPaddingBottom_10px{
    padding-bottom: 10px;
  }
  .myVA_M{
    vertical-align: middle;
  }
  .myMarginBottom_10px{
    margin-bottom: 20px;
  }
</style>
<script>
  import { getAreaList } from '@/api/area';
  import { getDeviceDetail, createDevice, modifyDevice, devTypeList } from '@/api/device'
  export default {
    data(){
      return{
        title: "设备管理",
        id: null,
        detail: {},

        type: '',
        loading: false,
        is_disabled: true,
        is_modifly: true,
       

        areaList: [],
        areaLoaded: false,
        areaSelected: null,

        devRoomList: [],
        devRoomSelected: null,

        devTypeList: devTypeList,
        devTypeSelected: null,

        is_dis:false,
        is_mod:false
      }
    },
    components: {
        
    },
    mounted(){
      let that = this;
      this.type = this.$route.query.type;
      this.id = this.$route.query.id;

     if(this.type=='update'){ //修改
        this.fetchDetail();
        this.is_modifly = false;
      }

      if(this.type=='add'){
        this.is_modifly = false;
        this.is_disabled = false;
        this.is_dis=true;
      }

      if(this.type=='info'){ //修改
        this.fetchDetail();
        this.is_modifly = true;
        this.is_disabled = true;
        this.is_dis=true;
      }


      
    },
    methods:{     
      fetchDetail() {
        let vm = this;
        this.loading = true;

        getDeviceDetail(this.id)
        .then(response => {
          vm.detail = response.data;

          vm.areaSelected = vm.detail.area_info.value;
          vm.$set(vm.areaList, 0, vm.detail.area_info);

          vm.devRoomSelected = vm.detail.dev_room_info.value;
          vm.devTypeSelected = vm.detail.dev_type + '';
          vm.$set(vm.devRoomList, 0, vm.detail.dev_room_info);
          if(vm.detail.dev_room_info){
            this.is_mod = true;
            this.is_dis=true;
          }else{
            this.is_dis=true;
          }
          vm.loading = false;
        })
        .catch(error => {
          vm.loading = false;
        })
      },  
      clickAreaSelect(val) {
        if (!val) {
          return;
        }

        let vm = this;
        const params = {
          ril: 'S',
          page_num: 1,
          page_size: 999
        };
        if (!this.areaLoaded) {
          getAreaList(params)
          .then(response => {
            vm.areaList = response.data.rows;
            vm.areaLoaded = true;
          })
          .catch(error => {

          })
        }
      },
      inputFunc:function(e){
        if($.trim($(e.target).val())!=""){
          $(e.target).closest(".col-md-6").find(".errorInfor").addClass("hide");
          $(e.target).closest(".col-md-6").find("input").removeClass("errorInput")
          
        }
      },
      isValidate:function(){
        var res = true;
        if(this.detail.dev_name==""){
          $(".errorName").removeClass("hide");
          $(".errorName").closest(".col-md-6").find("input").addClass("errorInput");
          res = false;
        }

        if(this.detail.dev_no==""){
          $(".errorNo").removeClass("hide");
          $(".errorNo").closest(".col-md-6").find("input").addClass("errorInput");         
          res = false;
        }
       

        if(this.areaSelected == null){
          $(".errorsssbf").removeClass("hide");
          $(".errorsssbf").closest(".col-md-6").find("select").addClass("errorInput");         
          res = false;
        }

        return res;
      },
      modify(){
        if(!this.isValidate()){
          return;
        }

        let vm = this;
        this.loading = true;
        modifyDevice(this.id, this.detail)
        .then(response => {
          vm.loading = false;
          vm.$router.go(-1);
        })
        .catch(error=> {
          vm.loading = false;
        });
      },
      create:function(){
        if(!this.isValidate()){
          return;
        }

        this.detail.area_id = this.areaSelected;

        let vm = this;
        this.loading = true;
        createDevice(this.detail)
        .then(response => {
          vm.loading = false;
          vm.$router.go(-1);
        })
        .catch(error=> {
          vm.loading = false;
        });
      },
      onBack(){
        this.$router.push({
          path:"/sbgl"
        })
      }

    }
  
  }


</script>



